<template>
    <div class="centerbox">
        <!-- 个人中心页 -->
        <loading v-show="!allshow" class="jiazai"></loading>
        <div v-show="allshow">
            <div class="centopbox">
                <div class="headtop"  
                :class="{'centerscroll': bgtmd>=0.7}" 
                :style="{backgroundColor:'rgba(255, 255, 255,'+bgtmd+') !important'}">
                    <div class="cenright">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-shouye4"></use>
                        </svg>
                        <svg class="icon" aria-hidden="true" @click="tc=!tc">
                            <use xlink:href="#icon-shouye1"></use>
                        </svg>
                    </div>
                </div>
                <div class="centerhead" v-show="tc" @click="tuichuxianshi">
                    退出账号
                </div>
                <div class="centerhead asdf" v-show="tc" @click="qinchushuju">
                    清理缓存
                </div>
            </div>
            <!-- <centertop :bgtm="bgtmd"></centertop> -->
            <centermy></centermy>
            <centercenter v-on:gdok="gdoks"></centercenter>
        </div>
    </div>
</template>
<script>
// import centertop from "../small/centertop.vue"
import centercenter from "../small/centercenter.vue"
import centermy from "../small/centermy.vue"
import loading from "../small/loading.vue"
export default {
    name:"center",
    components:{
        centercenter,
        centermy,
        // centertop,
        loading
    },
    data(){
        return{
            allshow:false,
            bgtmd:0,
            tc:false
        }
    },
    beforeMount: function() {
        window.addEventListener('scroll', this.centerscroll)
        document.body.addEventListener('scroll', this.centerscroll)
    },
    beforeRouteEnter(to,from,next){
        let _token = localStorage.getItem('_token')
        if(_token == null){
            next({path:'/login'});// 跳转登录
        }
        else {
            next();// 进入个人中心
        }
    },
    methods:{
        gdoks(res){
            this.allshow = res.status
        },
        centerscroll(){
            let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
            if(scrollTop >= 200){
                this.bgtmd = 1
            }else{
                this.bgtmd = scrollTop/200
            }
        },
        tuichuxianshi(){
            localStorage.clear();
            this.$router.push("/index")
        },
        qinchushuju(){
            sessionStorage.clear()
        }
    }
}
</script>
<style lang="less" scoped>
.centerbox{
    min-height: 100%;
    padding-top: 1px;
    box-sizing: border-box;
    background-color: #f0efef47;
    padding-bottom: 80px;
}
a{
    -webkit-tap-highlight-color:transparent;
}
.jiazai{
    height: 600px;
    width:100%;
}
.centopbox{
    width: 100%;
    z-index: 100;
    position: fixed;
    top: 0px;
    height: 50px;
    .headtop{
        width: 100%;
        padding: 8px;
        height: 100%;
        background-color: red;
        box-sizing: border-box;
    }
    .centerhead{}
    .cenright{
        display: flex;
        float: right;
        svg{
            font-size: 1.8rem;
            margin: 4px 8px;
            color: white;
        }
    }
    .centerscroll{
        background-color: rgb(255, 255, 255) !important;
        .cenright{
            svg{
                color: #a3a3a3 !important;
            }
        }
    }
    .centerhead{
        position: absolute;
        right: 12px;
        background: white;
        padding: 10px;
        color:#a3a3a3;
        border-radius: 10px;
    }
    .asdf{
        top:100px   
    }
}
</style>